<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blog_list.css">
</head>
<body>
    <div class="nav">
        <!-- 导航栏 -->
        <img src="image/123.PNG" alt="加载失败">
        <span class="title">我的博客系统</span>
        <span class = "spacer"></span>

        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logOut">注销</a>
    </div>

    <!-- 页面主体 -->
    <div class = "container">
            <div class="container-left">
                <div class="card">
                    <img src="image/456.JPG" alt="">
                    <h3>温习文</h3>
                    <a href="https://gitee.com/wenxiwen19981229" target="_blank">github地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>

                    <div class="counter">
                        <span class="article">2</span>
                        <span>3</span>
                    </div>
                </div>
            </div>

            <div class="container-right">
                <!-- <div class="blog">
                    <div class="title">这是一篇博客</div>
                    <div class="date">2022-9-28 12:00:00</div>
                    <div class="desc">从今天起我要好好敲代码 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime, inventore cupiditate pariatur cum laudantium quisquam magni qui tempore quaerat repellendus quo veritatis quia maiores culpa? Soluta tempore doloremque non quo.lor
                        Lorem ipsum dolor sit amet . 
                    </div>

                    <a href="">查看全文 &gt;&gt;</a>
                </div> -->
            </div>
        </div>
               <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
               <script src="JS/app.js"></script>
              
              <script>

                    function getBlogs(){
                        
                        $.ajax({
                            type:'get',
                            url: 'blog',
                            success: function(body) {
                                //这里会自动把json格式的字符串解析成和后端代码相同的类型数据
                                let containerDiv = document.querySelector('.container-right');
                                for(let blog of body) {
                                    let blogDiv = document.createElement('div');
                                    blogDiv.className = 'blog';

                                    //创建博客标题
                                    let titleDiv = document.createElement('div');
                                    titleDiv.className = 'title';
                                    titleDiv.innerHTML = blog.title;
                                    blogDiv.appendChild(titleDiv);

                                    //创建日期
                                    let dateDiv = document.createElement('div');
                                    dateDiv.className = 'date';
                                    dateDiv.innerHTML = blog.postTime;
                                    blogDiv.appendChild(dateDiv);

                                    //创建摘要
                                    let descDiv = document.createElement('div');
                                    descDiv.className = 'desc';
                                    descDiv.innerHTML = blog.content;
                                    blogDiv.appendChild(descDiv);

                                    //创建查看全文的按钮
                                    let a = document.createElement('a');
                                    a.innerHTML = '查看全文 >>';
                                    a.href = 'blog_detail.html?blogID=' + blog.blogID;
                                    blogDiv.appendChild(a);
                                    //把blogDiv加入最外层的标签
                                    containerDiv.appendChild(blogDiv);
                                }
                            }

                        });
                    }
                    //显示博客列表页
                    getBlogs();
                    
                    //登录验证
                    checkLogin();

                    
                     function getUserInfo() {

                        $.ajax({
                            type: 'get',
                            url: 'userInfo',

                            success: function(body) {
                                let h3 = document.querySelector(".card h3");
                                h3.innerHTML = body.userName;
                            }
                        });

                        
                    }

                    //显示用户信息
                    getUserInfo();
                    
                    function getUserArticle(){
                        $.ajax({
                            type: 'post',
                            url: 'userInfo',

                            success: function(body) {
                                let articleDiv = document.querySelector(".counter .article");
                                articleDiv.innerHTML = body;
                            }
                        });
                    }

                    //显示用户博文章数
                    getUserArticle();
               </script>
</body>
</html>